$(function() {
    // 获取文章分类
    getArtCate();

    function getArtCate() {
        $.ajax({
            method: "get",
            url: "/my/article/cates",
            success: function(res) {
                if (res.status !== 0) {
                    return layui.layer.msg(res.message);
                }
                // layui.layer.msg(res.message);
                var htmlstr = template("tpl-cate", res);
                // 下拉列表的内容
                $("[name=cate_id]").html(htmlstr);
                // 更新渲染表单
                layui.form.render("select");
            },
        });
    }

    // 初始化富文本编辑器
    initEditor();

    // 将图片初始化为裁剪效果
    // 1. 初始化图片裁剪器
    var $image = $("#image");

    // 2. 裁剪选项
    var options = {
        aspectRatio: 400 / 280,
        preview: ".img-preview",
    };

    // 3. 初始化裁剪区域
    $image.cropper(options);

    // 上传封面文件图片
    $("#btnChooseImage").on("click", function() {
        $("#coverFile").click();
    });
    // 监听表单的change事件
    $("#coverFile").on("change", function() {
        var filelist = $(this)[0].files;
        if (filelist.length <= 0) {
            return layui.layer.msg(`请上传图片`);
        }
        var file = filelist[0];
        var imgurl = URL.createObjectURL(file);
        $image
            .cropper("destroy") // 销毁旧的裁剪区域
            .attr("src", imgurl) // 重新设置图片路径
            .cropper(options); // 重新初始化裁剪区域
    });

    var status = "已发布";
    $("#btnSave2").on("click", function() {
        status = "草稿";
    });
    $("#form-pub").on("submit", function(e) {
        e.preventDefault();
        var fd = new FormData(this);
        fd.append("state", status);
        $image
            .cropper("getCroppedCanvas", {
                // 创建一个 Canvas 画布
                width: 400,
                height: 280,
            })
            .toBlob(function(blob) {
                // 将 Canvas 画布上的内容，转化为文件对象
                // 得到文件对象后，进行后续的操作
                fd.append("cover_img", blob);
                $.ajax({
                    method: "post",
                    url: "/my/article/add",
                    data: fd,
                    // 上传文件必写的属性
                    contentType: false,
                    // 告诉jQuery不要去设置Content-Type请求头
                    processData: false,
                    // 告诉jQuery不要去处理发送的数据
                    success: function(res) {
                        if (res.status !== 0) {
                            return layui.layer.msg(res.message);
                        }
                        layui.layer.msg(res.message);
                        location.href = "./wz_liebiao.html";
                        // 实现文章列表额高亮
                        // window.parent.document.querySelector("#gl").click();
                        // window.parent.document
                        //     .querySelector("#gl")
                        //     .nextSibling.removeClass();
                        window.parent.document
                            .querySelector("#gl")
                            .parentNode.classList.add("layui-this");
                        window.parent.document
                            .querySelector("#gl")
                            .parentNode.nextElementSibling.classList.remove("layui-this");
                    },
                });
            });
    });
});